document.addEventListener('DOMContentLoaded', function () {
    // 定义数据结构
    const listData = [
        { img: "./images/img0010.jpg", desc: "我们仰望着同一片天空却看着不同的地方。" },
        { img: "./images/img002.jpg", desc: "只要记住你的名字，不管你在世界的哪个地方，我一定会，去见你" },
        { img: "./images/img0014.jpg", desc: "就算发一千条短信，心与心之间的距离也不曾拉近过一厘米。" },
        { img: "./images/img0015.jpg", desc: "一件事情是幸福还是不幸，关键是你怎么去看。" },
        { img: "./images/img009.jpg", desc: "她的疼痛和痛楚，让我的心狠狠揪紧，我知道，她比任何人都要努力，我想帮助她，但我却已经够不到她了" },
        { img: "./images/img004.jpg", desc: "谁都不可能和谁在一起一辈子。人就是这样，必须去习惯失去。" },
    ];

    // 渲染“精彩照片”部分
    function renderLandscapes() {
        const appContainer = document.getElementById("appInfo");
        if (!appContainer) return;

        // 清空容器，防止重复渲染
        appContainer.innerHTML = '';

        listData.forEach((landscape, index) => {
            // 创建一个新的 div 来表示每个照片项
            const itemDiv = document.createElement('div');
            itemDiv.classList.add('item', 'fl');

            // 创建图像容器
            const imgDiv = document.createElement('div');
            imgDiv.classList.add('img');
            const imgElement = document.createElement('img');
            imgElement.src = landscape.img;
            imgElement.alt = landscape.name;
            imgDiv.appendChild(imgElement);
            itemDiv.appendChild(imgDiv);

            // 创建文本容器
            const txtDiv = document.createElement('div');
            txtDiv.classList.add('record-txt', 'ml-20');

            // 添加描述
            const descP = document.createElement('p');
            descP.classList.add('sub-txt-l');
            descP.textContent = landscape.desc;
            txtDiv.appendChild(descP);

            // 将文本添加到照片项
            itemDiv.appendChild(txtDiv);

            // 将照片项添加到应用容器
            appContainer.appendChild(itemDiv);
        });
    }

    // 在页面加载时调用渲染函数
    renderLandscapes();
});